<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch,nextTick } from "vue"
import { ElMessage, ElLoading } from 'element-plus';

import config from "../../layouts/config"

import { globalStore } from "@/store/global"
const globalVue = globalStore();
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties //vue3获取当前this
const storage = _this.$utils.storage;

onMounted(() => {
  refreshCode();
})
const codeImg = ref(null)
let refreshCode = () => {
  instance.proxy.$http.get('user.getVerifyCode', { tipConfig: {codeFile: true}}).then(res=>{
		codeImg.value = res;
  })
}


const loginForm = reactive({})
function onSubmit(){
  if (!loginForm.verifyCode) {
    ElMessage({
      showClose: true,
      message: 'Please enter a Code',
      type: 'info',
    })
    return ;
  }
  instance.proxy.$http.post('user.login', loginForm).then(res=>{
    globalVue.setToken(res.data.token);
    globalVue.setUserInfo(res.data);
    storage.setLocal('token', res.data.token);
    storage.setLocal('userinfo', res.data);
    nextTick(() => {
      gotoPage('/overview', 1);
    })
  }).catch((err) => {
    refreshCode();
    loginForm['verifyCode'] = ''
  })
}

function gotoPage(path, id) {
  storage.setLocal("header_active", id)
  if (instance != null) {
      const _this = instance.appContext.config.globalProperties; //vue3获取当前this
      if (!path) console.error("请传路径地址");
      _this.$router.push({path, query: {}})
  }
}
</script>
<template>
<div class="user_login">
  <div class="login_form">
    <div class="login_title">{{config.title}}</div>
    <el-input class="form_input" v-model="loginForm.username" placeholder="Account" />
    <el-input class="form_input" type="password"  v-model="loginForm.password" placeholder="Password" />
    <div class="login_code"><el-input class="ipu" v-model="loginForm.verifyCode" placeholder="Code" @keyup.enter="onSubmit" /> <img :src="codeImg" alt="" @click="refreshCode"></div>
    <el-button class="btn_submit" @click="onSubmit" round color="#3A4EFC">Sign In</el-button>
  </div>
</div>
</template>
<style scoped lang="less">
.user_login{
  width: 100%;
  height: 100%;
  background: url("~@img/user/login-bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login_form{
    position: absolute;
    top: 50%;
    right: 148px;
    transform: translateY(-50%);
    width: 567px;
    height: 718px;
    box-shadow: 0px 12px 32px 1px rgba(58, 78, 252, 0.1);
    padding: 80px 60px;
    // backdrop-filter: blur(32px);
	  background-color: #ffffff;  
    border-radius: 20px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    .form_input{
      width: 100%;
      height: 54px;
      margin-bottom: 32px;
    }
    .login_code{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 54px;
      margin-bottom: 32px;
      .ipu{
        margin-right: 16px;
        height: 100%;
      }
      img{
        width: 142px;
        height: 54px;
        cursor: pointer;
      }
    }
    .btn_submit{
      width: 100%;
      height: 54px;
      border-radius: 999px;
      margin-top: 66px;
      box-shadow: 0px 8px 12px 1px rgba(25,106,251,0.3);
    }
    .login_title{
      font-size: 22px;
      color: var(--mw-font-color-content);
      margin-bottom: 60px;
    }
  }
}
</style>